<template>
  <div v-if="status === '0'" class="notify">{{ $t('已取消') }}</div>
  <div v-else-if="status === '2'" class="notify">
    <div class="left">
      <div class="status">{{ $t('未付款') }}</div>
      <div class="count">{{ strCount }}</div>
    </div>
    <a v-if="phone > 0" href="javascript: void(0)" class="right" @click="handleCall(phone)">{{ $t('联系对方') }}</a>
  </div>
  <div v-else-if="status === '3'" class="notify">
    <div class="status">{{ $t('待放币') }}</div>
    <a v-if="phone > 0" href="javascript: void(0)" class="right" @click="handleCall(phone)">{{ $t('联系对方') }}</a>
  </div>
  <div v-else-if="status === '11'" class="notify">
    <div class="status">{{ $t('申诉中') }}</div>
    <a v-if="phone > 0" href="javascript: void(0)" class="right" @click="handleCall(phone)">{{ $t('联系对方') }}</a>
  </div>
  <div v-else-if="status === '12'" class="notify">
    <div class="status">{{ $t('申诉已处理') }}</div>
    <a v-if="phone > 0" href="javascript: void(0)" class="right" @click="handleCall(phone)">{{ $t('联系对方') }}</a>
  </div>
</template>
<script>
import { OTC_ORDER_CANCEL_INTERVAL } from '@/config'
import { callPhone } from '@/utils/jsbridge'
let timerId = null
export default {
  props: {
    status: {
      type: String,
      required: true
    },
    phone: {
      type: String,
      required: true
    },
    time: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      strCount: ''
    }
  },
  beforeMount () {
    this.timeAgo()
  },
  beforeDestroy () {
    clearTimeout(timerId)
  },
  methods: {
    timeAgo () {
      // 兼容safari
      const deadline = +new Date(this.time.replace(/-/g, '/')) + OTC_ORDER_CANCEL_INTERVAL * 60 * 1000
      const strDate = deadline - new Date()
      if (strDate > 0) {
        this.strCount = `${this.$t('请在')} ${Math.ceil(strDate / 60000)} ${this.$t('分钟内付款')}！`
        timerId = setTimeout(() => {
          this.timeAgo()
        }, 60000)
      } else {
        this.strCount = this.$t('已超过付款期限')
      }
    },
    handleCall (phone) {
      callPhone(phone)
    }
  }
}
</script>
<style scoped>
.notify {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
  background: #1b8afe;
  color: #ffffff;
  padding: 5px 15px;
  line-height: 1.4;
}
.notify .status,
.notify .count {
  color: #ffffff;
  line-height: 1.4;
}
.notify .right {
  color: #ffffff;
  font-size: 14px;
}
</style>
